<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">订单编号：</span>
                <el-input placeholder="输入订单编号" v-model.trim="order_sn" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">会员UID：</span>
                <el-input placeholder="输入会员UID" v-model.trim="user_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">供应商ID：</span>
                <el-input placeholder="输入供应商ID" v-model.trim="supplier_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">选择站点：</span>
                <el-select v-model="sites_id" clearable placeholder="请选择站点">
                    <el-option v-for="item in siteArrs" :key="item.dc_id" :label="item.title" :value="item.dc_id" />
                </el-select>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">选择日期：</span>
                <el-date-picker v-model="area_time" type="date" value-format="YYYY-MM-DD" :disabled-date="disabledDate" placeholder="请选择日期" />
            </div>
            <div class="task-one__btn task-wrap-btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div>
        <!-- 批量操作 -->
        <div class="batch-oper">
            <el-button type="default" plain @click="clickPackHwh">打包合并</el-button>
        </div>
        <div class="table-head flexs">
            <div class="table-check">
                <el-checkbox v-model="allChecked" @change="changeAll" />
            </div>
            <div class="table-good table-head-base">商品信息</div>
            <div class="table-supp table-head-base">物流信息</div>
            <div class="table-buy-info table-head-base">备注</div>
            <!-- <div class="table-oper table-head-base">操作</div> -->
        </div>
        <!-- 内容 -->
        <div class="table-body" v-loading="loading">
            <template v-if="arr_data.length > 0 && !loading">
                <div class="table-item" v-for="(item, index) in arr_data" :key="index">
                    <div class="table-item-head flexs">
                        <div class="table-item__head-left">
                            <div class="table-check" style="margin-right: 12px">
                                <el-checkbox v-model="item.is_select" @change="changeOne" />
                            </div>
                            <p class="item-head__sn">订单编号：{{ item.order_sn }}</p>
                            <p class="item-head__text">货架号：{{ item.shelve_title + item.shelve_num }}</p>
                            <p class="item-head__text">
                                总扎数：<span>{{ item.total_num }}扎</span>
                            </p>
                        </div>
                        <div class="table-item__head-right"></div>
                    </div>
                    <div class="table-item-cont">
                        <div class="table-good table-head-base item-cont__base">
                            <div class="table-sub">
                                <p v-for="(sub, subindex) in item.product_list" :key="subindex">
                                    {{ sub.product_name }}，{{ sub.color }}，{{ sub.level }}级，{{ sub.weight }}kg，{{ sub.norm }}/{{ sub.unit }}，打包数:
                                    {{ sub.pack_num }}{{ sub.unit }}
                                </p>
                            </div>
                        </div>
                        <div class="table-supp table-head-base item-cont__base">
                            <div class="table-sub">
                                <p>物流名称：{{ item.express_type }}</p>
                                <p>联系电话：{{ item.express_phone }}</p>
                                <p>快递要求：{{ item.express_require == 0 ? "早班" : "晚班" }}</p>
                            </div>
                        </div>
                        <div class="table-buy-info table-head-base item-cont__base">
                            <div class="table-sub">
                                <detail-item title="订单备注：" title-width="86px" :value="item.intro || '无'" bottom="2px" />
                                <detail-item title="管理员备注：" title-width="86px" :value="item.admin_msg || '无'" bottom="2px" />
                                <detail-item title="特殊需求：" title-width="86px" v-if="item.have_extra == 1">
                                    <div class="detail-items">
                                        <span v-for="(xq, xqindex) in item.extra_list" :key="xqindex">{{ xq.title }}，</span>
                                    </div>
                                </detail-item>
                            </div>
                        </div>
                        <!-- <div class="table-oper table-head-base">
                            <div class="table-sub table-sub-btn">
                                <el-button link type="primary" class="theme-btn" @click="clickDetail(item)">查看详情</el-button>
                            </div>
                        </div> -->
                    </div>
                </div>
            </template>
            <div class="table-none" v-if="arr_data.length == 0 && !loading">暂无数据</div>
        </div>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>

        <!-- 打包合并弹窗-选择货位号 -->
        <el-dialog v-model="dialogPackHwh" title="打包合并-选择货位号" width="600px" :append-to-body="true" :destroy-on-close="true" @close="closePackHwh">
            <detail-item class="detail-line" bottom="16px" title-width="120px" title="货位号">
                <el-select v-model="pack_hwh" clearable placeholder="请选择货位号">
                    <el-option v-for="item in packHwh" :key="item.title" :label="item.title" :value="item.title" />
                </el-select>
            </detail-item>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="form_loading" @click="confirmPackHwh">确认</el-button>
                    <el-button @click="closePackHwh">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加规格 -->
        <el-drawer title="添加规格" v-model="drawerSku" direction="rtl" size="680px" :append-to-body="true" :destroy-on-close="true" @close="closeSku">
            <div class="xq-box">
                <detail-item title="规格列表" bottom="16px">
                    <el-button style="margin-bottom: 10px" type="primary" @click.stop="addLevel">添加规格</el-button>
                    <el-table
                        class="table-mb"
                        :data="skuArrs"
                        :header-cell-style="{ background: '#F5F7FA' }"
                        element-loading-background="rgba(255, 255, 255, 0.6)"
                    >
                        <el-table-column label="规格">
                            <template #default="{ row }">
                                <el-select v-model="row.pack_id" clearable placeholder="请选择打包规格">
                                    <el-option v-for="item in packArrs" :key="item.pack_id" :label="item.title" :value="item.pack_id" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="数量">
                            <template #default="{ row }">
                                <el-input-number v-model="row.nums" :min="1" :max="9999" v-if="row.nums" />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="80" class-name="operation-nav" fixed="right">
                            <template #default="scope">
                                <p class="link-item" style="color: #4b93fa" @click.stop="delLevel(scope.$index)">删除</p>
                            </template>
                        </el-table-column>
                    </el-table>
                </detail-item>
                <detail-item class="upload-detail" bottom="16px" title="凭证图片">
                    <div class="upload-box">
                        <div class="img-list" v-if="photos.length > 0">
                            <div class="img-selects" v-for="(item, index) in photos" :key="index">
                                <el-image class="img-selects__pic" :src="proxy.imgUrl + item + '!img_400'" :preview-src-list="srcList" :initial-index="index" fit="cover" />
                                <div class="img-del" @click.stop="delImg(index)">
                                    <el-icon size="14px" color="#fff"><CloseBold /></el-icon>
                                </div>
                            </div>
                        </div>
                        <div class="img-box flexs-center" @click.stop="showImg = true" v-if="photos.length < 5">
                            <el-icon color="#999" size="26px">
                                <UploadFilled />
                            </el-icon>
                        </div>
                    </div>
                    <p class="input-tips">
                        最多可上传<code>{{ photos.length }}/5</code>张
                    </p>
                </detail-item>
                <detail-item bottom="16px" title="备注信息">
                    <el-input v-model.trim="note" type="textarea" clearable :rows="6" maxlength="100" show-word-limit placeholder="请输入备注信息" />
                </detail-item>
            </div>
            <template #footer>
                <div class="drawer-footer flexs-center">
                    <el-button type="primary" :loading="form_loading" @click="confirmSku">确认规格</el-button>
                    <el-button @click="closeSku">取消</el-button>
                </div>
            </template>
        </el-drawer>

        <!-- 图片库 -->
        <picture-library :show="showImg" :select_multiple="true" @close="showImg = false" @select="selectImg"> </picture-library>

        <go-back />
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import { useRouter, onBeforeRouteLeave } from "vue-router"
import { Search, CloseBold, UploadFilled } from "@element-plus/icons-vue"
import { useBaseStore } from "@store/base"
import OneLoad from "@mixins/one-load"
import GoBack from "@components/GoBack.vue"
import DetailItem from "@components/DetailItem.vue"
import PictureLibrary from "@components/PictureLibrary.vue"

const store = useBaseStore()
const router = useRouter()
const { proxy } = getCurrentInstance()

onMounted(() => {
    getSite()
    getList()
})

// 离开-可以利用这个触发删除页面缓存操作
onBeforeRouteLeave((to, from, next) => {
    if (to.name === "OrderDetail") {
        store.setInclude("PackList")
    } else {
        store.delInclude("PackList")
    }
    next()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, arr_data, loading, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pageSize.value = val
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    page.value = val
    pubParams(getList)
})

function getList() {
    let day = area_time.value ? area_time.value.replace(/-/g, "") : ""
    let params = {
        page: page.value,
        limit: pageSize.value,
        order_sn: order_sn.value,
        uid: user_id.value,
        dc_id: sites_id.value,
        supplier_id: supplier_id.value,
        day,
        // shelve_type: shelveObj.value == null ? "" : shelveObj.value.shelve_type,
        // shelve_num: shelveObj.value == null ? "" : shelveObj.value.shelve_num,
    }
    getdata("storage/pack/index", params)
}

// 搜索
const order_sn = ref("")
const area_time = ref("")
const user_id = ref("")
const sites_id = ref("")
const supplier_id = ref("")
const handleSearch = () => {
    search_btn.value = true
    allChecked.value = false
    pubRefreshParams(getList)
}
const disabledDate = (time) => {
    return time.getTime() > Date.now()
}

// 公用字段
const form_loading = ref(false)
const itemObjs = ref({}) // item数据

/**
 * 全/反选
 * @param {Boolean} allChecked 全/反选值
 * @param {Array} packHwh 选中的货位号
 * @param {Function} changeAll 全/反选事件
 */
const allChecked = ref(false)
const packHwh = ref([])
const changeAll = (val) => {
    let arrs = []
    arr_data.value.map((item) => {
        item.is_select = val
        val &&
            arrs.push({
                title: item.shelve_title + item.shelve_num,
                shelve_num: item.shelve_num,
                shelve_title: item.shelve_title,
                shelve_type: item.shelve_type,
            })
    })
    packHwh.value = arrs
}
// 单选
const changeOne = () => {
    let flag = true,
        arrs = []
    for (let i = 0; i < arr_data.value.length; i++) {
        if (!arr_data.value[i].is_select) {
            flag = false
        } else {
            arrs.push({
                title: arr_data.value[i].shelve_title + arr_data.value[i].shelve_num,
                shelve_num: arr_data.value[i].shelve_num,
                shelve_title: arr_data.value[i].shelve_title,
                shelve_type: arr_data.value[i].shelve_type,
            })
        }
    }
    allChecked.value = flag
    packHwh.value = arrs
}

// 打包合并
const dialogPackHwh = ref(false)
const pack_hwh = ref("")
const confirmPackHwh = () => {
    if (pack_hwh.value.length == 0) {
        proxy.$message({ message: "请选择货位号！", type: "warning" })
        return
    }
    packHwh.value.map((item) => {
        if (item.title === pack_hwh.value) {
            item.is_main = 1
        } else {
            item.is_main = 0
        }
    })
    dialogPackHwh.value = false
    drawerSku.value = true
    getPacks()
}
const closePackHwh = () => {
    dialogPackHwh.value = false
    pack_hwh.value = ""
}
const clickPackHwh = () => {
    if (packHwh.value.length == 0) {
        proxy.$message({ message: "请选择需要打包合并的货位号！", type: "warning" })
        return
    }
    dialogPackHwh.value = true
}

/**
 * 合并时添加规格
 * @param {Boolean} drawerSku 弹窗
 * @param {String} note 备注
 * @param {Array} skuArrs 降级列表
 */
const drawerSku = ref(false)
const note = ref("")
const closeSku = () => {
    drawerSku.value = false
    note.value = ""
    skuArrs.value = []
}
// 添加规格
const skuArrs = ref([])
const addLevel = () => {
    skuArrs.value.push({
        nums: 1,
        pack_id: "",
    })
}
// 确认规格
const confirmSku = () => {
    if (skuArrs.value.length == 0) {
        proxy.$message({ message: "请添加打包规格！", type: "warning" })
        return
    }
    // 打包规格
    let pack = []
    for (let i = 0; i < skuArrs.value.length; i++) {
        if (!skuArrs.value[i].pack_id) {
            proxy.$message({ message: "请选择打包规格！", type: "warning" })
            return
        } else {
            pack.push({
                pack_id: skuArrs.value[i].pack_id,
                nums: skuArrs.value[i].nums,
            })
        }
    }
    // 货位号
    let shelve = []
    packHwh.value.map((item) => {
        shelve.push({
            shelve_type: item.shelve_type,
            shelve_num: item.shelve_num,
            is_main: item.is_main,
        })
    })

    // 日期
    let day = ''
    if(area_time.value){
        day = area_time.value ? area_time.value.replace(/-/g, "") : ""
    }else{
        let days = proxy.$util.getDate()
        day = days.replace(/-/g, "")
    }
    form_loading.value = true
    proxy.$axios
        .post("storage/pack/affirm", {
            shelve,
            pack,
            note: note.value,
            photos: photos.value,
            day,
        })
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                drawerSku.value = false
                allChecked.value = false
                proxy.$message({ message: "提交成功！", type: "success" })
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}
const delLevel = (index) => {
    skuArrs.value.splice(index, 1)
}
// 获取打包规格
const packArrs = ref([])
function getPacks() {
    proxy.$axios
        .get("operation/productPack")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                packArrs.value = result
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

/**
 * 添加凭证
 * @property {Boolean} showImg 显示图片库
 * @property {Array} photos 凭证数组
 * @property {Array} srcList 预览凭证数组
 * @property {Function} selectImg 选择图片
 */
const showImg = ref(false)
const photos = ref([])
const srcList = ref([])
const selectImg = (val) => {
    if (val.length > 5) {
        proxy.$message({ message: "最多添加5张图片！", type: "warning" })
        return
    }
    showImg.value = false
    for (let i = 0; i < val.length; i++) {
        photos.value.push(val[i].photo)
        srcList.value.push(proxy.imgUrl + val[i].photo)
    }
}
const delImg = (index) => {
    photos.value.splice(index, 1)
    srcList.value.splice(index, 1)
}

// 站点信息
const siteArrs = ref([])
function getSite() {
    proxy.$axios
        .get("operation/dc")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                siteArrs.value = result
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

// const clickDetail = (row) => {
//     router.push({
//         path: "/Order/OrderDetail",
//         query: {
//             oid: row.order_id,
//         },
//     })
// }
</script>
<script>
export default {
    name: "PackList",
}
</script>

<style lang="less" scoped>
.link-item {
    cursor: pointer;
}
.upload-detail {
    :deep(.detail-item__right) {
        overflow: inherit;
    }
    .upload-box {
        display: flex;
        justify-content: flex-start;
        flex-flow: row wrap;
        .img-list {
            flex: none;
        }
        .img-selects,
        .img-box {
            margin-bottom: 10px;
        }
    }
}

.table-sub {
    :deep(.detail-item__left) {
        margin-right: 0 !important;
    }
}

.detail-items {
    font-size: 14px;
    color: #000e37;
    flex: 1;
    word-wrap: break-word;
}
.batch-oper {
    margin-top: @margin-xs;
    margin-bottom: @margin-lg;
}

.table-head {
    background-color: #f5f7fa;
    width: 100%;
    height: 50px;
    border-radius: @radius-sm;
    border: 1px solid #ebeef5;
    overflow: hidden;
    margin-bottom: @margin-sm;
    padding: 0px @padding-md;
}

.table-body {
    margin-bottom: @margin-xl;

    .table-item {
        border: 1px solid #ebeef5;
        margin-bottom: @margin-sm;

        .table-item-head {
            background-color: #f5f7fa;
            width: 100%;
            height: 46px;
            overflow: hidden;
            padding: 0px @padding-md;
            border-bottom: 1px solid #ebeef5;

            .table-item__head-left {
                display: flex;
                align-items: center;

                .item-head__sn {
                    font-size: @font-size-md;
                    font-weight: bold;
                    color: @gray-8;
                    margin-right: @margin-mdl;
                    flex: none;
                }

                .item-head__text {
                    font-size: @font-size-md;
                    color: @gray-8;
                    margin-right: @margin-mdl;
                    flex: none;

                    span {
                        color: @themes;
                    }
                }
            }
        }

        .table-item-cont {
            display: flex;

            & > div {
                padding: @padding-md @padding-xs;
                font-weight: 500;
                text-align: left;

                &:last-child {
                    text-align: left;

                    .el-button {
                        margin: 0 @margin-sm @margin-xs 0;
                    }
                }
            }

            .table-sub {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .table-sub-btn {
                flex-flow: row wrap;
                justify-content: flex-start;
                align-content: center;
            }

            .table-good {
                padding-left: @padding-md;
                padding-right: @padding-md;
                text-align: left;
            }

            .table-lr {
                margin-bottom: @margin-xs;

                &:last-child {
                    margin-bottom: 0;
                }
            }

            .item-cont__base {
                border-right: 1px solid #ebeef5;
            }
        }
    }
}

.table-check {
    flex: none;
    margin-right: @margin-base;
}

.table-good {
    flex: 1;
}

.table-supp {
    width: 20%;
    flex: none;
    text-align: left;
}

.table-buy-info {
    width: 38%;
    flex: none;
    text-align: left;
}

.table-oper {
    width: 8%;
    flex: none;
}

.table-head-base {
    font-size: @font-size-md;
    font-weight: 700;
    color: @gray-8;
    padding: 0px @margin-xs;
}

:deep(.el-checkbox__inner) {
    width: 16px;
    height: 16px;

    &::after {
        width: 3px;
        height: 7px;
        left: 5px;
        top: 2px;
    }
}

.table-none {
    font-size: @font-size-md;
    color: @gray-7;
    text-align: center;
    line-height: 40px;
}
</style>
